<template>
  <div class="w h over-h box-s main-index-page">
    <router-view class="w main-index-router" style="height:calc(100% - 28px)" v-slot="{ Component }">
      <transition :name="isGoNext" class="w main-index-router-transition">
        <component :is="Component" class="w main-index-router-components"></component>
      </transition>
    </router-view>
    <page-tab @tab-click="tabsClick" @tabList="tabList" :routeName="currentRouterName"></page-tab>
  </div>
</template>

<script lang="ts">
import { type RouteLocationNormalized, type RouteRecordName } from 'vue-router';
import PageBase from '../mixins/page-base';
import PageTab from '@/views/components/page-tab/index.vue';
import { routerState } from '@/store/modules/router';
declare const window: any;

export default {
  mixins: [PageBase],
  components: {
    PageTab
  },
  data() {
    return {
      currentRouterName: 'home' as RouteRecordName | null | undefined,
      viewMetaIndex: 0,
      isGoNext: 'loan-go',
    }
  },
  methods: {
    tabsClick({ item }: any) {
      this.$router.push({ name: item.path.name, params: item.path.params || {} })
    },
    tabList(e: any) {
      // this.tabListInfo = e;
    },
    getMetaIndex(to: any, form: any) {
      try {
        let meatIndex = 1;
        let formMetaIndex = 1;
        if (to.meta) {
          meatIndex = to.meta.zIndex;
        }
        if (form.meta) {
          formMetaIndex = form.meta.zIndex;
        }
        this.isGoNext = meatIndex < formMetaIndex ? 'loan-back' : 'loan-go'
        this.viewMetaIndex = formMetaIndex;
      } catch (error) {
        console.error(`路由未设置meta:{zIndex:n}值:${JSON.stringify(form)}`);
      }
    }
  },
  beforeRouteUpdate(to: RouteLocationNormalized, form: RouteLocationNormalized) {
    this.currentRouterName = to.name;
    this.getMetaIndex(to, form);
  },
  watch: {
    '$route.matched': function (newVal, oldVal) {
      // this.getMetaIndex(this.$route);
    }
  },
  mounted() {
    this.viewMetaIndex = 1
  },
  created() {
    if ((this.$store as { getters: routerState }).getters.reloadPage) {
      window.location.reload();
      // this.goBackOrForward(0);
    }  
  }
}
</script>
<style lang="scss">
@import '@/assets/task-type.scss';
</style>
<style lang="scss" scoped></style>
